<template>
    <div>
        <span style="font-weight: bold;"> 销售日期:</span>&emsp;
        <el-date-picker v-model="form.salesDate" type="date" style="width: 200px;border: none;"
            placeholder="日期" />&emsp;&emsp;
        <span style="font-weight: bold;"> 客户: </span>&emsp;
        <el-select v-model="form.Customer" multiple placeholder="请选择" style="width: 240px">
            <el-option label="罗翔" value="罗翔" />
            <el-option label="扬家霖" value="扬家霖" />
            <el-option label="雷鑫" value="雷鑫" />
            <el-option label="王单青" value="王单青" />
            <el-option label="温暖暖" value="温暖暖" />
            <el-option label="杨杰" value="杨杰" />
            <el-option label="赵丽" value="赵丽" />
            <el-option label="黄强" value="黄强" />
            <el-option label="吴敏" value="吴敏" />
            <el-option label="周亮" value="周亮" />
            <el-option label="徐蕾" value="徐蕾" />
            <el-option label="孙伟" value="孙伟" />
            <el-option label="李霞" value="李霞" />
            <el-option label="马超" value="马超" />
            <el-option label="郭丽" value="郭丽" />
            <el-option label="高峰" value="高峰" />
            <el-option label="何敏" value="何敏" />
            <el-option label="林静" value="林静" />
            <el-option label="罗文" value="罗文" />
            <el-option label="蒋娜" value="蒋娜" />
        </el-select>&emsp;&emsp;
        <span style="font-weight: bold;"> 耳号: </span>&emsp;
        <el-select style="width: 100px" v-model="form.EarTag" placeholder="请选择">
            <el-option v-for="item in eweData" :label="item.earNumber" :value="item.sleepInforId"
                @click="geteweData()" />
        </el-select>
        <br>
        <span style="font-weight: bold;"> 单据号: </span>&emsp;
        <el-input style="width: 200px;" v-model="form.DocumentNumber" placeholder="-- --" />&emsp;&emsp;&emsp;
        <span style="font-weight: bold;"> 部门: </span>&emsp;
        <el-cascader v-model="value" :props="props" :options="options2" @change="handleChange2" />&emsp;&emsp;&emsp;
        <span style="font-weight: bold;"> 收货地址: </span>&emsp;
        <el-input style="width: 100px" v-model="form.ShippingAddress"></el-input>&emsp;&emsp;
        <br>
        <span style="font-weight: bold;"> 销售员: </span>&emsp;
        <el-select v-model="form.SalesPerson" multiple placeholder="请选择" style="width: 240px">
            <el-option label="罗翔" value="罗翔" />
            <el-option label="扬家霖" value="扬家霖" />
            <el-option label="雷鑫" value="雷鑫" />
            <el-option label="王单青" value="王单青" />
            <el-option label="温暖暖" value="温暖暖" />
            <el-option label="杨杰" value="杨杰" />
            <el-option label="赵丽" value="赵丽" />
            <el-option label="黄强" value="黄强" />
            <el-option label="吴敏" value="吴敏" />
            <el-option label="周亮" value="周亮" />
            <el-option label="徐蕾" value="徐蕾" />
            <el-option label="孙伟" value="孙伟" />
            <el-option label="李霞" value="李霞" />
            <el-option label="马超" value="马超" />
            <el-option label="郭丽" value="郭丽" />
            <el-option label="高峰" value="高峰" />
            <el-option label="何敏" value="何敏" />
            <el-option label="林静" value="林静" />
            <el-option label="罗文" value="罗文" />
            <el-option label="蒋娜" value="蒋娜" />
        </el-select>
        <el-button type="danger" style="float: right;;margin-left: 10px;" @click="getTable">查询</el-button>
    </div>
    <br />
    <hr style="border: 4px solid lightgray;" />
    <div style="margin-top: 10px;">
        <el-button type="danger" style="float: left;;margin-left: 10px;">+ 新增</el-button>&emsp;
        <el-button type="danger" :icon="Delete" style="float: left;;margin-left: 10px;" @click="">删除</el-button>
    </div>
    <h2 style="background-color:lightpink;margin-top: 20px;" v-if="totals != 0"> &emsp;&emsp;已选择 {{ totals }} 条</h2>
    <hr style="border: 4px solid lightgray;margin-top: 20px;" />
    <el-table :data="tableData" height="400" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="salesRecordId" label="序号" />
        <el-table-column prop="salesDate" label="销售日期">
            <template #default="scope">
                {{ scope.row.salesDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="documentNumber" label="单据号" />
        <el-table-column prop="customer" label="客户" />
        <el-table-column prop="count" label="只数" />
        <el-table-column prop="totalPrice" label="总成交订价">
            <template #default="scope">
                {{ scope.row.totalPrice }}元
            </template>
        </el-table-column>
        <el-table-column prop="examId" label="审核状态">
            <template #default="scope">
                {{ scope.row.examId == null ? '未审核' : '已审核' }}
            </template>
        </el-table-column>
        <el-table-column prop="mastitis" label="部门">
            <template #default="scope">
                {{ scope.row.departmentName }}
            </template>
        </el-table-column>
        <el-table-column prop="shippingAddress" label="收货地址" />
        <el-table-column prop="salesPerson" label="销售员" />
        <el-table-column prop="createName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间">
            <template #default="scope">
                {{ scope.row.createTime.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" />
        <el-table-column prop="updateTime" label="修改时间" />
        <el-table-column prop="examName" label="审核人" />
        <el-table-column prop="examTime" label="审核时间" />
        <el-table-column prop="examName" label="财务审核人" />
        <el-table-column prop="examTime" label="财务审核时间" />
        <el-table-column prop="examName" label="仓库审核人" />
        <el-table-column prop="examTime" label="仓库审核时间" />
        <el-table-column prop="name" fixed="right" width="120" label="操作">
            <template #default="scope">
                <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" link @click="">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination style="float: left" v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
        :page-sizes="[5, 10, 15, 20]" layout="slot" :total="form.totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        <el-button v-for="item in form.totalPage" :disabled="form.PageIndex == item"
            style="background-color: lightpink;" @click="handleCurrentChange(item)">{{
                item
            }}</el-button>
    </el-pagination>
    <el-pagination style="float: right;" v-model:current-page="form.PageIndex" v-model:page-size="form.PageSize"
        :page-sizes="[5, 10, 15, 20]" layout="  prev, pager, next" :total="form.totalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script lang="ts" setup>
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();


//钩子函数
onMounted(() => {
    getTable()//获取表格数据
    geteweData()//获取耳号
    getOptions2()//获取部门
})


const form = reactive({
    salesRecordIds: [],
    salesDate: null,
    Customer: '',
    EarTag: '',
    DocumentNumber: '',
    Department: '',
    ShippingAddress: '',
    SalesPerson: '',
    PageIndex: 1,
    PageSize: 5,
    totalPage: 1,
    totalCount: 1,
})

const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
    form.salesRecordIds = multipleSelection.value.map((item: any) => item.salesRecordId)

    console.log(form.salesRecordIds)
}

// 计算属性
const totals = computed(() => {
    let totalNumber = 0;
    form.salesRecordIds.forEach((item: any) => {
        totalNumber += 1
    })
    return totalNumber
})
//#region 级联部门
//部门级联

const value = ref([])
const props = {
    expandTrigger: 'hover' as const,
}

const handleChange2 = (value: any) => {
    form.Department = value[value.length - 1]
    console.log(form.Department)

}
const options2 = ref([])
const getOptions2 = () => {
    axios.get("http://localhost:5039/api/Depart/SearchDepartmentTree").then((res) => {
        console.log(res.data.data)
        options2.value = res.data.data
    })
}


//#endregion
//获取耳号
const eweData = ref<any>([]);
const geteweData = () => {
    axios.get('http://localhost:5039/api/SleepBegin/SelectEarFeMale').then(res => {
        eweData.value = res.data.data;
    })
}
//分页
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
    form.PageSize = val;
    getTable();
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    form.PageIndex = val;
    getTable();
};
//查询表数据
const tableData = ref([]); //获取数据
const getTable = () => {
    axios.get('http://localhost:5039/api/Sales_Purchases/BreedingSalesList', {
        params: {
            PageIndex: form.PageIndex,
            PageSize: 5,
            salesDate: form.salesDate || null,
            Customer: form.Customer,
            EarTag: form.EarTag || 0,
            DocumentNumber: form.DocumentNumber,
            Department: form.Department || 0,
            ShippingAddress: form.ShippingAddress,
            SalesPerson: form.SalesPerson,
        }
    }).then(res => {
        tableData.value = res.data.item;
        form.totalCount = res.data.totalCount;
        form.totalPage = res.data.totalPage;
        console.log('获取数据成功');
    })

}


// //批量删除
// const DeletesRange = () => {
//     axios.post('http://localhost:5039/api/ProductionManagement/MotherGivingBirthDelet', {
//         motherGivingBirthIds: form.motherGivingBirthIds
//     }).then(res => {
//         if (res.data.code == 0) {
//             ElMessage({
//                 message: '删除成功',
//                 type: 'success',
//             })
//             getTable()
//         }
//     })
// }

const handleEdit = (row: any) => {
    console.log(row);
};
const handleDelete = (row: any) => {
    console.log(row)
}










</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>
